﻿<MCard Width=510 Height=680 Class="mx-auto my-auto">
    <div style="height:60px;"></div>
    <div class="mt-2 mx-auto text-center" style="width:420px;">
        <MAvatar Size=80>
            <MImage Src="/img/avatar/1.svg">
            </MImage>
        </MAvatar>
        <h5 class="mt-2 mb-12">Welcome to SampleBlazorWebViewShared! 👋</h5>

        <MTextField TValue="string"
                    Label="Email"
                    Placeholder="john@example.com"
                    Outlined
                    HideDetails="@("auto")">
        </MTextField>
        <MTextField TValue="string"
                    Class="mt-10"
                    Label="Password"
                    Type="@(_show ? "text" : "password")"
                    Placeholder="john@example.com"
                    AppendIcon="@(_show ? "mdi-eye" : "mdi-eye-off")"
                    OnAppendClick="() => _show = !_show"
                    Outlined
                    HideDetails="@("auto")">
        </MTextField>
        <span class="d-flex justify-end mt-1 text-caption hover-pointer">
            Forgot Password?
        </span>
        <MButton Class="mt-11 rounded-4 text-btn white--text" OnClick=OnLogin Height=46 Width=340 Color="primary">Login</MButton>

        <div class="my-6">
            <span class="text-btn">New on our platform? &nbsp;</span>
            <span class="primary--text hover-pointer">Create an account</span>
        </div>
        <div class="d-flex block-center">
            <div style="height:0.5px;width:152px;" class="neutral-lighten-5"></div>
            <span class="text-caption mx-4">or login with</span>
            <div style="height:0.5px;width:152px;" class="neutral-lighten-5"></div>
        </div>
        <div class="mt-4">
            <MIcon Size=24 Color="neutral-lighten-2" OnClick="() => { }">fab fa-codepen</MIcon>
            <MIcon Size=24 Color="neutral-lighten-2" Class="ml-6" OnClick="() => { }">fab fa-github</MIcon>
            <MIcon Size=24 Color="neutral-lighten-2" Class="ml-6" OnClick="() => { }">fab fa-twitter</MIcon>
            <MIcon Size=24 Color="neutral-lighten-2" Class="ml-6" OnClick="() => { }">fab fa-instagram</MIcon>
        </div>
    </div>
</MCard>
